<template>
	<view>
		<view class="search">
			<template>
				<input maxlength="20" focus type="text" confirm-type="search" @confirm="searchStart()"
					@input="handleInput" placeholder="请输入关键词搜索" v-model="searchText" />
			</template>
			<image src="../../static/zy-search/search.svg" mode="aspectFit" @click="searchStart()" class="search-icon">
			</image>
		</view>

		<view class="list" v-if="searchText && nowList.length > 0">
			<view class="searchitem" v-for="(item,index) in nowList" :key="index" @click="keywordsClick(item)">{{item}}
			</view>
		</view>
		<view class="" v-else>

			<view :class="'wanted-' + theme" v-if="showWant">
				<view class="header">猜你想搜的</view>
				<view class="list guess">
					<view v-for="(item,index) in hotList" :key="index" @click="keywordsClick(item)">{{item}}</view>
				</view>
			</view>
			<view :class="'s-' + theme" v-if="hList.length > 0">
				<view class="header">
					历史记录
					<image src="../../static/zy-search/delete.svg" mode="aspectFit" @click="delhistory"></image>
				</view>
				<view class="list">
					<view class="item" v-for="(item,index) in hList" :key="index" @click="keywordsClick(item)">{{item}}
						<text @click.stop="delhistory(item)" class="delicon" />
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "zy-search",
		props: {
			nowList: { //搜索列表数据
				type: Array,
				default () {
					return []
				}
			},
			theme: { //选择块级显示还是圆形显示
				type: String,
				default: 'block'
			},
			showWant: { //是否展示推荐菜单
				type: Boolean,
				default: false
			},
			hotList: { //推荐列表数据
				type: Array,
				default () {
					return []
				}
			},
			val: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				searchText: '', //搜索关键词
				hList: uni.getStorageSync('search_cache') //历史记录
			};
		},
		methods: {
			handleInput(e) {
				this.$tool.debounce(() => {
					console.info('交易完成' + e.detail.value);
				}, 1000)
			},
			searchStart: function() { //触发搜索
				let _this = this;
				if (_this.searchText == '') {
					uni.showToast({
						title: '请输入关键字',
						icon: 'none',
						duration: 1000
					});
				} else {
					_this.$emit('getSearchText', _this.searchText);
					uni.getStorage({
						key: 'search_cache',
						success(res) {
							let list = res.data;
							if (list.length > 5) {
								for (let item of list) {
									if (item == _this.searchText) {
										return;
									}
								}
								list.pop();
								list.unshift(_this.searchText);
							} else {
								for (let item of list) {
									if (item == _this.searchText) {
										return;
									}
								}
								list.unshift(_this.searchText);
							}
							_this.hList = list;
							uni.setStorage({
								key: 'search_cache',
								data: _this.hList
							});
						},
						fail() {
							_this.hList = [];
							_this.hList.push(_this.searchText);
							uni.setStorage({
								key: 'search_cache',
								data: _this.hList
							});
							_this.$emit('getSearchText', _this.searchText);
						}
					})
				}
			},
			keywordsClick(item) { //关键词搜索与历史搜索
				this.searchText = item;
				this.searchStart();
			},
			delhistory(index) { //清空历史记录
				if (index) {
					this.hList.splice(index, 1)
				} else {
					this.hList = [];
				}
				uni.setStorage({
					key: 'search_cache',
					data: this.hList
				});
			}
		}
	}
</script>

<style lang="scss">
	.searchitem {
		border-bottom: 1rpx solid #e8e8e8;
		width: 100%;
	}

	.search {
		margin: 20rpx;
		border-radius: 200rpx;
		position: relative;
		background: #FFFFFF;

		input {
			background-color: #f1f1f1;
			padding: 10rpx 74rpx;
			font-size: 28rpx;
			border-radius: 50rpx;
			height: 80rpx;
		}

		.voice-icon {
			width: 36rpx;
			height: 36rpx;
			padding: 16rpx 20rpx 16rpx 0;
			position: absolute;
			left: 16rpx;
			top: 4rpx;
			z-index: 10;
		}

		.search-icon {
			width: 36rpx;
			height: 36rpx;
			padding: 16rpx 20rpx 16rpx 0;
			position: absolute;
			right: 0;
			top: -2rpx;
			z-index: 10;
		}
	}

	.s-block {
		margin-top: 30rpx;

		.header {
			font-size: 32rpx;
			padding: 30rpx;
			position: relative;
			display: flex;
			align-items: center;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-left: auto;
			}
		}

	}

	.guess {
		display: flex;
	}

	.item {
		width: 100%;
	}

	.s-circle {
		margin-top: 30rpx;

	}

	.wanted-block {
		margin-top: 30rpx;
	}

	.header {
		font-size: 32rpx;
		padding: 30rpx;
	}

	.list {
		display: flex;
		flex-wrap: wrap;

		view {
			color: #8A8A8A;
			font-size: 28rpx;
			box-sizing: border-box;
			padding: 20rpx 20rpx;
			border-top: 2rpx solid #FFF;
			border-left: 2rpx solid #FFF;
			background-color: #FFFFFF;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.delicon::after {
			position: absolute;
			right: 30rpx;
			font-size: 40rpx;
			content: "×";
		}
	}

	.wanted-circle {
		margin-top: 30rpx;
	}
</style>
